<template>
	<view>
		<uni-forms :modelValue="formData" label-position="top" :rules="rules" ref="form" label-width="auto">
			<uni-forms-item label="姓名：" name="name" >
				<uni-easyinput type="text" v-model="formData.name" disabled/>
			</uni-forms-item>
			<uni-forms-item label="性别：" name="age" >
				<uni-easyinput type="text" v-model="formData.name" disabled/>
			</uni-forms-item>
			<uni-forms-item label="联系电话：" name="age" >
				<uni-easyinput type="text" v-model="formData.name" disabled/>
			</uni-forms-item>
			<uni-forms-item label="身份证号码：" name="age" >
				<uni-easyinput type="text" v-model="formData.name" disabled/>
			</uni-forms-item>
			
			<uni-forms-item label="政治面貌：" name="age" >
				<uni-data-select v-model="formData.value" :localdata="range" @change="change"></uni-data-select>
			</uni-forms-item>
			<uni-forms-item label="是否有固定工作单位：" name="age" >
				<uni-data-select v-model="formData.value" :localdata="range" @change="change"></uni-data-select>
			</uni-forms-item>
			<uni-forms-item label="职业类型：" name="age" >
				<uni-data-select v-model="formData.value" :localdata="range" @change="change"></uni-data-select>
			</uni-forms-item>
			</uni-forms-item>
			<uni-forms-item label="灵活就业类型：" name="age" >
				<uni-data-select v-model="formData.value" :localdata="range" @change="change"></uni-data-select>
			</uni-forms-item>
			<uni-forms-item label="工作所在地(或居住地)：" name="age" >
				<uni-easyinput type="text" v-model="str" readOnly @focus="visible=true" />
				<cityPicker :column="column" :default-value="defaultValue" :mask-close-able="maskCloseAble"
					@confirm="confirm" @cancel="cancel" :visible="visible">
				</cityPicker>
			</uni-forms-item>
			<uni-forms-item label="工作单位是否已建会：" name="age" >
				<uni-data-select v-model="formData.value" :localdata="range" @change="change"></uni-data-select>
			</uni-forms-item>
			<uni-forms-item label="申请加入工会：" name="age" >
				<uni-data-select v-model="formData.value" :localdata="range" @change="change"></uni-data-select>
			</uni-forms-item>
		</uni-forms>
		<view class="agree flex background-f">
			<view class="left">
				<uni-data-checkbox multiple v-model="checkAll" :localdata="hobbyAll">
				</uni-data-checkbox>
			</view>
			<view class="right">
				同意<text class="text">《中华全国总工会转会申请书》</text>
			</view>
		</view>
		<view class="btn1 flex">
			<button class="button flex1 margin20">
				提交申请
			</button>
		</view>
	</view>
</template>

<script>
	import cityPicker from '@/uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker'
	export default {
		data() {
			return {
				checkAll: [],
				hobbyAll: [{
					text: '',
					value: 0
				}],
				visible: false,
				maskCloseAble: true,
				str: '',
				range: [{
						value: 0,
						text: "篮球"
					},
					{
						value: 1,
						text: "足球"
					},
					{
						value: 2,
						text: "游泳"
					},
				],
				defaultValue: '420103',
				// defaultValue: ['河北省','唐山市','丰南区'],
				column: 3,
				formData: {
					value: "",
					name: "",
					region: ['省份', '市', '区/县'],
					single: "",
				},
				rules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '姓名不能为空'
						}]
					}
				}
			};
		},
		components: {
			cityPicker
		},
		onLoad(query) {
		    // query 中包含从其他页面传递过来的参数
		    if (query.title) {
		      uni.setNavigationBarTitle({
		        title: query.title
		      });
		    }
		  },
		methods: {
			checkboxChange(e) {
				this.isChecked = e.detail.value[0]
			},
			changesingle(e) {
				console.log(e)
			},
			change(e) {
				console.log("e:", e);
			},
			open() {
				this.visible = true
			},
			confirm(val) {
				console.log(val)
				this.str = val.name
				this.visible = false
			},
			cancel() {
				this.visible = false
			}
		},
	}
</script>

<style lang="scss" scoped>
	::v-deep .uni-forms {
		padding: 0 32rpx 16rpx;
		background-color: #fff;

	}
	.agree{
		padding: 32rpx;
		margin-top: 16rpx;
		.left{
			width: 52rpx;
		}
		.right {
			font-size: 24rpx;
			.text{
				color: rgba(189, 26, 45, 1);
			}
		}
		::v-deep .is-checked .checkbox__inner{
			border-color: rgba(189, 26, 45, 1) !important;
			background-color: #fff !important;
		}
		::v-deep .checkbox__inner-icon{
			border-bottom-color:rgba(189, 26, 45, 1) !important;
			border-right-color:rgba(189, 26, 45, 1) !important;
		}
	}
</style>